<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        const mainFontSize = 22;
        const subFontSize = 16;
        const mainFont = `italic ${mainFontSize}px 'Times New Roman'`;
        const subFont = `italic ${subFontSize}px 'Times New Roman'`;

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // Helper function to draw text with subscript
        function drawTextWithSubscript(ctx, text, sub, x, y) {
            ctx.font = mainFont;
            const textWidth = ctx.measureText(text).width;
            ctx.fillText(text, x, y);
            
            ctx.font = subFont;
            ctx.fillText(sub, x + textWidth * 0.9, y + 5);
        }

        // --- Left Cylinder ---
        const c1x = 150;
        const c1y = 150;
        const r1 = 80;

        // Draw the circle
        ctx.beginPath();
        ctx.arc(c1x, c1y, r1, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the radius R1
        const r1_angle = 7 * Math.PI / 6; // 210 degrees
        const r1_endX = c1x + r1 * Math.cos(r1_angle);
        const r1_endY = c1y + r1 * Math.sin(r1_angle);
        drawArrow(ctx, c1x, c1y, r1_endX, r1_endY);
        
        // Draw the label R1
        drawTextWithSubscript(ctx, "R", "1", c1x - 35, c1y + 35);
        
        // Draw the angular velocity Omega1
        drawTextWithSubscript(ctx, "Ω", "1", c1x + 30, c1y - 25);
        
        // Draw the rotation arrow for cylinder 1
        const rot_arc_r1 = 0.6 * r1;
        const startAngle1 = 0.8 * Math.PI;
        const endAngle1 = 1.9 * Math.PI;
        ctx.beginPath();
        ctx.arc(c1x, c1y, rot_arc_r1, startAngle1, endAngle1, false); // false for clockwise
        ctx.stroke();
        
        // Draw arrowhead for rotation arrow 1
        const arrow_endX1 = c1x + rot_arc_r1 * Math.cos(endAngle1);
        const arrow_endY1 = c1y + rot_arc_r1 * Math.sin(endAngle1);
        drawArrow(ctx, c1x + rot_arc_r1 * Math.cos(endAngle1 - 0.1), c1y + rot_arc_r1 * Math.sin(endAngle1 - 0.1), arrow_endX1, arrow_endY1);


        // --- Right Cylinder ---
        const c2x = 320;
        const c2y = 150;
        const r2 = 50;

        // Draw the circle
        ctx.beginPath();
        ctx.arc(c2x, c2y, r2, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the radius R2
        const r2_angle = 7 * Math.PI / 6; // 210 degrees
        const r2_endX = c2x + r2 * Math.cos(r2_angle);
        const r2_endY = c2y + r2 * Math.sin(r2_angle);
        drawArrow(ctx, c2x, c2y, r2_endX, r2_endY);

        // Draw the label R2
        drawTextWithSubscript(ctx, "R", "2", c2x - 28, c2y + 20);

        // Draw the angular velocity Omega2
        drawTextWithSubscript(ctx, "Ω", "2", c2x + 10, c2y + 15);
        
        // Draw the rotation arrow for cylinder 2
        const rot_arc_r2 = 0.6 * r2;
        const startAngle2 = 0.8 * Math.PI;
        const endAngle2 = 1.9 * Math.PI;
        ctx.beginPath();
        ctx.arc(c2x, c2y, rot_arc_r2, startAngle2, endAngle2, false); // false for clockwise
        ctx.stroke();
        
        // Draw arrowhead for rotation arrow 2
        const arrow_endX2 = c2x + rot_arc_r2 * Math.cos(endAngle2);
        const arrow_endY2 = c2y + rot_arc_r2 * Math.sin(endAngle2);
        drawArrow(ctx, c2x + rot_arc_r2 * Math.cos(endAngle2 - 0.15), c2y + rot_arc_r2 * Math.sin(endAngle2 - 0.15), arrow_endX2, arrow_endY2);


        // --- Draw the Figure Caption ---
        ctx.font = `20px 'Times New Roman'`;
        ctx.fillText("Fig. 1.128.", 175, 320);

    </script>
</body>
</html>